<template>
  <view>
    <view class="query">
      <view class="th">
        <text class="td">编号</text>
        <text class="td">名称</text>
        <text class="td">经营范围</text>
        <text class="td">联系人ID</text>
      </view>

      <view v-for="(item, index) in List" :key="index">
        <text class="td">{{ item.supplier_id }}</text>
        <text class="td">{{ item.supplier_name }}</text>
        <text class="td">{{ item.supplier_description }}</text>
        <text class="td">{{ item.contact_id }}</text>
        <text class="td_" @tap="del(item.supplier_id)">删除</text>
        <text class="td_" @tap="updshow(item.supplier_id)">修改</text>
      </view>
    </view>
    <button @click="showadd">添加</button>
    <view class="add" v-show="flag">
      <view class="addtitle"> 供应商添加 </view>
      名称:<input class="input" v-model="supplier_name" type="text" />
      经营范围:<input
        class="input"
        v-model="supplier_description"
        type="number"
      />
      联系人ID:<input class="input" v-model="contact_id" type="text" />
      <button @click="add">添加</button>
    </view>

    <view class="add" v-show="show">
      <view class="addtitle"> 供应商修改 </view>
      名称:<input class="input" v-model="supplier_name" type="text" />
      经营范围:<input
        class="input"
        v-model="supplier_description"
        type="number"
      />
      联系人ID:<input class="input" v-model="contact_id" type="text" />

      <button @click="upd()">修改</button>
    </view>
  </view>
</template>

<script>
import { getAllBpmSupplier, getTest } from "@/api/bpm/supplier";

export default {
  data() {
    return {
      supplier_name: "",
      supplier_description: null,
      sprice: null,
      contact_id: "",

      List: [],

      flag: false,
      show: false,
      upd1: null,
    };
  },
  onLoad() {
    this.getList();
    this.getTest();
  },
  methods: {
    getTest() {
      getTest().then((response) => {
        console.log(response);
        this.test = response.data;
      });
    },

    getList() {
      getAllBpmSupplier().then((response) => {
        console.log(response.rows);

        this.dataList = response.rows;
      });
    },

    add() {
      this.flag = !this.flag;
      console.log(
        this.supplier_name + this.supplier_description + this.contact_id
      );
      // 发送 POST 请求
      uni.request({
        url: "http://localhost:8080/add",
        method: "POST",
        data: {
          supplier_name: this.supplier_name,
          supplier_description: this.supplier_description,
          contact_id: this.contact_id,
        },
        success: function (res) {
          console.log(res.data);
        },
        fail: function (err) {
          console.log(err);
        },
      });
      this.getList();
    },
    updshow(id) {
      this.show = !this.show;
      this.upd1 = id;
      console.log(this.upd1);
    },
    showadd(id) {
      this.flag = !this.flag;
    },
    del(id) {
      console.log(id);
      uni.request({
        url: "http://localhost:8080/del",
        method: "PUT",
        data: id,
        success: (res) => {
          console.log(res);
          this.getList();
        },
      });
    },
    upd() {
      console.log(this.upd1);
      uni.request({
        url: "http://localhost:8080/upd",
        method: "POST",
        data: {
          id: this.upd1,
          supplier_name: this.supplier_name,
          supplier_description: this.supplier_description,
          contact_id: this.contact_id,
          sprice: this.sprice,
        },
        success: (res) => {
          console.log(res);
        },
      });
      this.getList();
      this.show = !this.show;
    },
  },
};
</script>

<style lang="scss">
/* #ifndef APP-NVUE */
page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #fff;
  min-height: 100%;
  height: auto;
}

view {
  font-size: 14px;
  line-height: inherit;
}

/* #endif */

.text {
  text-align: center;
  font-size: 26rpx;
  margin-top: 10rpx;
}

.grsupplier_id-item-box {
  flex: 1;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.uni-margin-wrap {
  wsupplier_idth: 690rpx;
  wsupplier_idth: 100%;
}

.swiper {
  height: 300rpx;
}

.swiper-box {
  height: 150px;
}

.swiper-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 300rpx;
  line-height: 300rpx;
}

@media screen and (min-wsupplier_idth: 500px) {
  .uni-swiper-dot-box {
    wsupplier_idth: 400px;
    /* #ifndef APP-NVUE */
    margin: 0 auto;
    /* #endif */
    margin-top: 8px;
  }

  .image {
    wsupplier_idth: 100%;
  }
}

.query {
  width: auto;
  margin: 10rpx;
  height: auto;
  /* background-image: linear-gradient(to right, #1f6eb4, #2c9dff); */
}

.th {
  font-weight: bold;
}

.td {
  display: inline-block;
  margin-left: 5rpx;
  width: 100rpx;
}

.td_ {
  display: inline-block;
  margin-left: 5rpx;
  width: 100rpx;
  color: #ff2631;
}

.add {
  position: fixed;
  bottom: 0;
}

.input {
  border: 1px solid lightgray;
  border-radius: 5rpx;
}

.addtitle {
  font-weight: bold;
  text-align: center;
}
</style>
